<template>
  <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
    <div class="logo-con" style="text-align: center; margin-top: 10px;">
      <img src="../assets/logo.png" alt="" style="height: 40px;">
    </div>
    <Menu ref="sideMenu" theme="dark" width="auto"
          :open-names="openNames"
          :active-name="activeName"
          @on-open-change="onOpenChange"
          @on-select="changeMenu">
      <!--<MenuItem name="/admin">-->
        <!--<Icon type="ios-speedometer"></Icon>-->
        <!--控制台-->
      <!--</MenuItem>-->
      <!--<Submenu name="1">-->
        <!--<template slot="title">-->
          <!--<Icon type="lock-combination"></Icon>-->
          <!--权限管理-->
        <!--</template>-->
        <!--<MenuItem name="/admin/manager">管理员管理</MenuItem>-->
        <!--<MenuItem name="/admin/log">管理员日志</MenuItem>-->
        <!--<MenuItem name="/admin/role">角色组</MenuItem>-->
        <!--<MenuItem name="/admin/rule">规则管理</MenuItem>-->
      <!--</Submenu>-->
      <!--<Submenu name="2">-->
        <!--<template slot="title">-->
          <!--<Icon type="ios-people"></Icon>-->
          <!--会员管理-->
        <!--</template>-->
        <!--<MenuItem name="/admin/customer">会员列表</MenuItem>-->
        <!--<MenuItem name="/admin/group">会员分组</MenuItem>-->
        <!--<MenuItem name="">会员规则</MenuItem>-->
      <!--</Submenu>-->
      <!--<Submenu name="3">-->
        <!--<template slot="title">-->
          <!--<Icon type="ios-list"></Icon>-->
          <!--CMS管理-->
        <!--</template>-->
        <!--<MenuItem name="/admin/class">栏目管理</MenuItem>-->
        <!--<MenuItem name="/admin/concert">演出管理</MenuItem>-->
        <!--<MenuItem name="/admin/goods">纪念品管理</MenuItem>-->
        <!--<MenuItem name="/admin/sells">销售管理</MenuItem>-->
        <!--<MenuItem name="/admin/carousel">轮播图管理</MenuItem>-->
        <!--<MenuItem name="/admin/comments">评论管理</MenuItem>-->
      <!--</Submenu>-->
      <template v-for="menu in menus">
        <MenuItem v-if="menu.type==='1'" :name="menu.url" :key="menu.id">
          <Icon :type="menu.icon" :key="menu.id"></Icon>
          <span class="layout-text">{{menu.name}}</span>
        </MenuItem>
        <Submenu v-if="menu.type==0" :name="menu.id" :key="menu.id">
          <template slot="title">
            <Icon :type="menu.icon"></Icon>
            <span class="layout-text">{{ menu.name }}</span>
          </template>
          <template v-for="child in menu.children">
            <MenuItem :name="child.url" :key="child.id">
              <Icon :type="child.icon"></Icon>
              <span class="layout-text">{{ child.name }}</span>
            </MenuItem>
          </template>
        </Submenu>
      </template>
    </Menu>
  </Sider>
</template>

<style lang="css" scoped>

</style>

<script>
  export default {
    methods: {
      init() {
        this.$axios({
          method: 'get',
          url: '/api/root'
        }).then((res) => {
          const resArr = res.data.result;
          let rootNode = resArr.find(e => e.parentId === "0");
          this.buildTree(rootNode, resArr);
          this.menus = rootNode.children;
          this.activeName = '/admin';
          this.$nextTick(()=>{
            this.$refs.sideMenu.updateOpened();
            this.$refs.sideMenu.updateActiveName()
          });
        }).catch((error) => {
          this.$Notice.error({
            title: '加载失败!'
          });
          console.log(error);
        });
      },
      buildTree(node, arrs) {
        const children = [];
        arrs.forEach(e => {
          if (e.parentId === node.id) {
            if (e.type === '0') { this.buildTree(e, arrs); }
            children.push(e);
          }
        });
        this.$set(node, "children", children);
      },
      onOpenChange(url) {
        this.$Cookies.set('open_name', url);
      },
      changeMenu(url) {
        this.$Cookies.set('active_name', url);
        this.$router.push({path: url});
      }
    },
    mounted() {
      this.init();
    },
    data() {
      return {
        activeName: '',
        openNames: [],
        menus: []
      };
    }
  };
</script>
